<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Bootstrap Tour, easy product tours with Bootstrap from Twitter</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="assets/vendor/bootstrap.css" rel="stylesheet">
        <link href="assets/vendor/bootstrap-responsive.css" rel="stylesheet">
        <link href="assets/vendor/prism.css" rel="stylesheet">
        <link href="assets/css/bootstrap-tour.css" rel="stylesheet">
        <link href="assets/css/index.css" rel="stylesheet">
        <!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
    </head>
    <body>
        <a href="https://github.com/sorich87/bootstrap-tour" id="github"><img src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
        <div id="navbar" class="navbar navbar-inverse navbar-fixed-top">
            <div class="navbar-inner">
                <div class="container">
                    <ul class="nav">
                        <li>
                            <a href="#home">Home</a>
                        </li>
                        <li>
                            <a href="#demo">Demo</a>
                        </li>
                        <li>
                            <a href="#usage">Usage</a>
                        </li>
                        <li>
                            <a href="#options">Options</a>
                        </li>
                        <li>
                            <a href="#contribute">Contribute</a>
                        </li>
                        <li>
                            <a href="#license">License</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <header id="home">
            <div class="jumbotron masthead">
                <h1 id="reflex">Bootstrap Tour</h1>
                <p>Quick and easy way to build your product tours with Twitter Bootstrap Popovers.</p>
                <p><a href="https://github.com/sorich87/bootstrap-tour/archive/master.zip" id="download" class="btn-primary btn-large btn">Download Bootstrap Tour</a></p>
                <ul class="masthead-links">
                    <li>
                        <a href="http://github.com/sorich87/bootstrap-tour">GitHub project</a>
                    </li>
                    <li>
                        <a href="#demo">Demo</a>
                    </li>
                    <li>
                        Version 0.5.0
                    </li>
                </ul>
            </div>
        </header>
        <section id="demo">
            <div class="container">
                <div class="page-header">
                    <h2>Demo <small>Try it now!</small></h2>
                </div>
                <div class="row">
                    <div class="span9 content">
                        <p>Note: This library does not depend on the full Bootstrap package. The only dependencies are the tooltip and popover files.</p>
                        <a href="#" id="start" class="start btn-primary btn-large btn">&#9658; Start tour</a>
                    </div>
                </div>
            </div>
        </section>
        <section id="usage">
            <div class="container">
                <div class="page-header">
                    <h2>Usage <small>Oh wait, is it so simple?</small></h2>
                </div>
                <h3>1. Add the dependencies</h3>
<pre class="language-markup"><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    ...
    &lt;link href="bootstrap-tour.css" rel="stylesheet"&gt;
&lt;/head&gt;
&lt;body&gt;
    ...
    &lt;script src="jquery.js"&gt;&lt;/script&gt;
    &lt;script src="jquery.cookie.js"&gt;&lt;/script&gt; &lt;!-- remove this if you set Tour.useLocalStorage as true --&gt;
    &lt;script src="bootstrap.tooltip.js"&gt;&lt;/script&gt;
    &lt;script src="bootstrap.popover.js"&gt;&lt;/script&gt;
    &lt;script src="bootstrap-tour.js"&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
                <h3>2. Initialize the tour</h3>
                <pre class="language-javascript"><code>var tour = new Tour();</code></pre>
                <h3>3. Add steps</h3>
<pre class="language-javascript"><code>tour.addSteps([
    {
        element: "#my-element", // string (jQuery selector) - html element next to which the step popover should be shown
        title: "Title of my popover", // string - title of the popover
        content: "Content of my popover" // string - content of the popover
    },
    {
        element: "#my-other-element",
        title: "Title of my popover",
        content: "Content of my popover"
    }
]);</code></pre>
                <p>You can add as many steps as you want, but not too much or your
                users will fall asleep!</p>
                <h3>4. Start the tour</h3>
                <pre class="language-javascript"><code>tour.start();</code></pre>
            </div>
        </section>
        <section id="options">
            <div class="container">
                <div class="page-header">
                    <h2>Options <small>Well, let's go deeper</small></h2>
                </div>
                <h3>Useful Methods</h3>
                <p>Bootstrap Tour saves the current step and will not
                display the tour again to users who have already completed it.</p>
                <p>If, for some reasons, you want to force the tour to be
                displayed, pass <code class="language-javascript">true</code> to the <code class="language-javascript">start()</code>
                method.</p>
                <pre class="language-javascript"><code>tour.start(true);</code></pre>
                <p>Sometimes you want to end the tour prematurely:</p>
                <pre class="language-javascript"><code>tour.end();</code></pre>
                <p>Or skip to the next step:</p>
                <pre class="language-javascript"><code>tour.next();</code></pre>
                <p>Or go back to the previous step:</p>
                <pre class="language-javascript"><code>tour.prev();</code></pre>
                <p>Or skip to a specific step:</p>
                <pre class="language-javascript"><code>tour.showStep(i); // i is the position of the step in the tour, starting from 0 for the first step</code></pre>
                <p>Or restart the tour after it ended:</p>
                <pre class="language-javascript"><code>tour.restart();</code></pre>
                <p>Or verify if the tour ended:</p>
                <pre class="language-javascript"><code>tour.ended();</code></pre>
                <h3>Tour Options</h3>
<pre class="language-javascript"><code>var tour = new Tour({
    name: "tour",
    labels: {
        next: "Next &raquo;",
        prev: "&laquo; Prev",
        end: "End tour",
    },
    container: "body",
    keyboard: true,
    useLocalStorage: false,
    debug: false,
    backdrop: false,
    redirect: true,
    basePath: "",
    template: "&lt;div class='popover tour'&gt;
        &lt;div class='arrow'&gt;&lt;/div&gt;
        &lt;h3 class='popover-title'&gt;&lt;/h3&gt;
        &lt;div class='popover-content'&gt;&lt;/div&gt;
        &lt;div class='popover-navigation'&gt;
            &lt;button class='btn' data-role='prev'&gt;&laquo; Prev&lt;/button&gt;
            &lt;span data-role='separator'&gt;|&lt;/span&gt;
            &lt;button class='btn' data-role='next'&gt;Next &raquo;&lt;/button&gt;
            &lt;button class='btn' data-role='end'&gt;End tour&lt;/button&gt;
        &lt;/div&gt;
    &lt;/div&gt;",
    afterGetState: function(key, value) {},
    afterSetState: function(key, value) {},
    afterRemoveState: function(key, value) {},
    onStart: function(tour) {},
    onEnd: function(tour) {},
    onShow: function(tour) {},
    onShown: function(tour) {}
    onHide: function(tour) {},
    onHidden: function(tour) {},
    onNext: function(tour) {},
    onPrev: function(tour) {}
});</code></pre>
                <table class="table  table-bordered table-striped">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Type</th>
                            <th>Description</th>
                            <th>Default</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>name</td>
                            <td>String</td>
                            <td>This option is used to build the name of the
                            cookie or localStorage item where the tour state is stored. You can initialize
                            several tours with different names in the same page and application.</td>
                            <td><code class="language-javascript">'tour'</code></td>
                        </tr>
                        <tr>
                            <td>labels</td>
                            <td>Object</td>
                            <td>The text of the 'Previous', 'Next' and 'End tour' links</td>
                            <td><pre class="language-javascript"><code>{
    end: "End tour",
    next: "Next &raquo;",
    prev: "&laquo; Prev"
}</code></pre>
                            </td>
                        </tr>
                        <tr>
                            <td>keyboard</td>
                            <td>Boolean</td>
                            <td>This option set the left and right arrow navigation.</td>
                            <td><code class="language-javascript">true</code></td>
                        </tr>
                        <tr>
                            <td>useLocalStorage</td>
                            <td>Boolean</td>
                            <td>You can choose to save the tour state with localStorage instead of
                            cookie. If you decide, you can safely remove the jquery.cookie plugin from the
                            dependencies</td>
                            <td><code class="language-javascript">false</code></td>
                        </tr>
                        <tr>
                            <td>debug</td>
                            <td>Boolean</td>
                            <td>Set this option to true to have some useful informations printed in the
                            console.</td>
                            <td><code class="language-javascript">false</code></td>
                        </tr>
                        <tr>
                            <td>backdrop</td>
                            <td>Boolean</td>
                            <td>Show a dark backdrop behind the popover and its element,
                            highlighting the current step.</td>
                            <td><code class="language-javascript">false</code></td>
                        </tr>
                        <tr>
                            <td>redirect</td>
                            <td>Boolean|Function</td>
                            <td>Set a custom function to execute as redirect function.
                            The default redirect relies on the traditional
                            <code class="language-javascrip">document.location.href</code></td>
                            <td><code class="language-javascript">true</code></td>
                        </tr>
                        </tr>
                            <td>basePath</td>
                            <td>String</td>
                            <td>Specify a default base path prepended to the
                            <code class="language-javascript">path</code> option of every single
                            step. Very useful if you need to reuse the same tour on different
                            environments or sub-projects.</td>
                            <td><code class="language-javascript">''</code></td>
                        </tr>
                        <tr>
                            <td>template</td>
                            <td>String|Function</td>
                            <td>String or function that returns a string of the HTML template for
                            the popovers. If you pass a Function, two parameters are available:
                            <strong>i</strong> is the position of step in the tour and
                            <strong>step</strong> is the an object that contains all the other step
                            options.<br>
                            From version 0.5, the navigation template is included inside the
                            template so you can easily rewrite it. However, Bootstrap Tour maps the
                            <em>previous</em>, <em>next</em> and <em>end</em> logics to the elements
                            which have the related <code class="language-markup">data-role</code>
                            attribute. Therefore, you can also have multiple elements with the same
                            <code class="language-markup">data-role</code> attribute.
                            </td>
                            <td><pre class="language-javascript"><code>"&lt;div class='popover tour'&gt;
    &lt;div class='arrow'&gt;&lt;/div&gt;
    &lt;h3 class='popover-title'&gt;&lt;/h3&gt;
    &lt;div class='popover-content'&gt;&lt;/div&gt;
    &lt;div class='popover-navigation'&gt;
        &lt;button class='btn' data-role='prev'&gt;&laquo; Prev&lt;/button&gt;
        &lt;span data-role='separator'&gt;|&lt;/span&gt;
        &lt;button class='btn' data-role='next'&gt;Next &raquo;&lt;/button&gt;
        &lt;button class='btn' data-role='end'&gt;End tour&lt;/button&gt;
    &lt;/div&gt;
&lt;/div&gt;"</code></pre>
                            </td>
                        </tr>
                        <tr>
                            <td>afterGetState, afterSetState, afterRemoveState</td>
                            <td>Function</td>
                            <td>You may want to do something right after Bootstrap Tour read, write or remove
                            the state. Just pass functions to these.<br />
                            Your functions can have two parameters:
                            <ul class="unstyled">
                                <li>
                                    <strong>key</strong>
                                    Contains the name of the state being saved. It can be
                                    <code class="language-javascript">current_step</code> (for the state where the
                                    latest step the visitor viewed is saved) or
                                    <code class="language-javascript">end</code> (for the state which is saved when
                                    the user complete the tour). Note that Bootstrap Tour prepends the key with
                                    <code class="language-javascript">tour_</code> when saving the state.
                                </li>
                                <li>
                                    <strong>value</strong>
                                    The value of the state been saved. Can be the index of the
                                    current step if the key is <code class="language-javascript">current_step</code>, or
                                    <code class="language-javascript">yes</code> if the key is <code class="language-javascript">end</code>.
                                </li>
                            </ul>
                            <p>A simple example if to send a post request to your server each
                            time there is a change:</p>
<pre class="language-javascript"><code>var tour = new Tour({
    afterSetState: function(key, value) {
        $.post("/some/path", value);
    }
});
</code></pre>
                            </td>
                            <td><code class="language-javascript">function(key, value) { }</code></td>
                        </tr>
                        <tr>
                            <td>onStart</td>
                            <td>Function</td>
                            <td>Function to execute when the tour starts.</td>
                            <td><code class="language-javascript">function(tour) { }</code></td>
                        </tr>
                        <tr>
                            <td>onEnd</td>
                            <td>Function</td>
                            <td>Function to execute when the tour ends.</td>
                            <td><code class="language-javascript">function(tour) { }</code></td>
                        </tr>
                        <tr>
                            <td>onShow</td>
                            <td>Function</td>
                            <td>Function to execute right before each step is shown.</td>
                            <td><code class="language-javascript">function(tour) { }</code></td>
                        </tr>
                        <tr>
                            <td>onShown</td>
                            <td>Function</td>
                            <td>Function to execute right after each step is shown.</td>
                            <td><code class="language-javascript">function(tour) { }</code></td>
                        </tr>
                        <tr>
                            <td>onHide</td>
                            <td>Function</td>
                            <td>Function to execute right before each step is hidden.</td>
                            <td><code class="language-javascript">function(tour) { }</code></td>
                        </tr>
                        <tr>
                            <td>onHidden</td>
                            <td>Function</td>
                            <td>Function to execute right after each step is hidden.</td>
                            <td><code class="language-javascript">function(tour) { }</code></td>
                        </tr>
                        <tr>
                            <td>onNext</td>
                            <td>Function</td>
                            <td>Function to execute when next step is called.</td>
                            <td><code class="language-javascript">function(tour) { }</code></td>
                        </tr>
                        <tr>
                            <td>onPrev</td>
                            <td>Function</td>
                            <td>Function to execute when prev step is called.</td>
                            <td><code class="language-javascript">function(tour) { }</code></td>
                        </tr>
                    </tbody>
                </table>
                <h3>Step Options</h3>
<pre class="language-javascript"><code>tour.addStep({
    path: "",
    element: "",
    placement: "right",
    title: "",
    content: "",
    next: 0,
    prev: 0,
    animation: true,
    container: "body",
    backdrop: false,
    redirect: true,
    reflex: false,
    template: "",
    onShow: function(tour) {},
    onShown: function(tour) {},
    onHide: function(tour) {},
    onHidden: function(tour) {},
    onNext: function(tour) {},
    onPrev: function(tour) {}
});</code></pre>
                <table class="table  table-bordered table-striped">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Type</th>
                            <th>Description</th>
                            <th>Default</th>
                        </tr>
                    </thead>
                    <tbody>
                        </tr>
                            <td>path</td>
                            <td>String</td>
                            <td>Path to the page on which the step should be shown. This
                            allows you to build tours that span several pages!</td>
                            <td><code class="language-javascript">''</code></td>
                        </tr>
                        <tr>
                            <td>element</td>
                            <td>String (jQuery selector)</td>
                            <td>HTML element on which the step popover should be shown.<br />
                            <em>This option is required.</em></td>
                            <td><code class="language-javascript">''</code></td>
                        </tr>
                        <tr>
                            <td>placement</td>
                            <td>String|Function</td>
                            <td>How to position the popover. Possible choices:
                            <code class="language-javascript">'top'</code>,
                            <code class="language-javascript">'bottom'</code>,
                            <code class="language-javascript">'left'</code>,
                            <code class="language-javascript">'right'</code>.
                            </td>
                            <td><code class="language-javascript">'right'</code></td>
                        </tr>
                        <tr>
                            <td>title</td>
                            <td>String|Function</td>
                            <td>Step title</td>
                            <td><code class="language-javascript">''</code></td>
                        </tr>
                        <tr>
                            <td>content</td>
                            <td>String|Function</td>
                            <td>Step content</td>
                            <td><code class="language-javascript">''</code></td>
                        </tr>
                        <tr>
                            <td>next</td>
                            <td>Integer</td>
                            <td>Index of the step to show after this one, starting from
                            <code class="language-javascript">0</code> for the first step of the
                            tour. <code class="language-javascript">-1</code> to not show the link
                            to next step. By default, the next step (in the order you added
                            them) will be shown.<br />
                            <em>This option should be used in conjunction with
                            <code class="language-javascript">prev</code>.</em></td>
                            <td><code class="language-javascript">0</code></td>
                        </tr>
                        <tr>
                            <td>prev</td>
                            <td>Integer</td>
                            <td>Index of the step to show before this one, starting from
                            <code class="language-javascript">0</code> for the first step of the
                            tour. <code class="language-javascript">-1</code> to not show the link
                            to previous step. By default, the previous step (in the order you added
                            them) will be shown.<br />
                            <em>This option should be used in conjunction with
                            <code class="language-javascript">next</code>.</em></td>
                            <td><code class="language-javascript">0</code></td>
                        </tr>
                        <tr>
                            <td>animation</td>
                            <td>Boolean</td>
                            <td>Apply a css fade transition to the tooltip.</td>
                            <td><code class="language-javascript">true</code></td>
                        </tr>
                        <tr>
                            <td>container</td>
                            <td>String (jQuery selector)</td>
                            <td>Attachment of popover. Pass an element to append the popover
                            to. By default the popover is appended after the 'element' above.
                            This option is particularly helpful for Internet Explorer.</td>
                            <td><code class="language-javascript">'body'</code></td>
                        </tr>
                        <tr>
                            <td>backdrop</td>
                            <td>Boolean</td>
                            <td>Show a dark backdrop behind the popover and its element,
                            highlighting the current step.</td>
                            <td><code class="language-javascript">false</code></td>
                        </tr>
                        <tr>
                            <td>redirect</td>
                            <td>Boolean|Function</td>
                            <td>Set a custom function to execute as redirect function.
                            The default redirect relies on the traditional
                            <code class="language-javascrip">document.location.href</code></td>
                            <td><code class="language-javascript">true</code></td>
                        </tr>
                        <tr>
                            <td>reflex</td>
                            <td>Boolean</td>
                            <td>Enable the reflex mode: you can click on the element for
                            continue the tour.</td>
                            <td><code class="language-javascript">false</code></td>
                        </tr>
                        <tr>
                            <td>template</td>
                            <td>String|Function</td>
                            <td>String or function that returns a string of the HTML template for
                            the popovers. If you pass a Function, two parameters are available:
                            <strong>i</strong> is the position of step in the tour and
                            <strong>step</strong> is the an object that contains all the other step
                            options.<br>
                            From version 0.5, the navigation template is included inside the
                            template so you can easily rewrite it. However, Bootstrap Tour maps the
                            <em>previous</em>, <em>next</em> and <em>end</em> logics to the elements
                            which have the related <code class="language-markup">data-role</code>
                            attribute. Therefore, you can also have multiple elements with the same
                            <code class="language-markup">data-role</code> attribute.
                            </td>
                            <td><pre class="language-javascript"><code>"&lt;div class='popover tour'&gt;
    &lt;div class='arrow'&gt;&lt;/div&gt;
    &lt;h3 class='popover-title'&gt;&lt;/h3&gt;
    &lt;div class='popover-content'&gt;&lt;/div&gt;
    &lt;div class='popover-navigation'&gt;
        &lt;button class='btn' data-role='prev'&gt;&laquo; Prev&lt;/button&gt;
        &lt;span data-role='separator'&gt;|&lt;/span&gt;
        &lt;button class='btn' data-role='next'&gt;Next &raquo;&lt;/button&gt;
        &lt;button class='btn' data-role='end'&gt;End tour&lt;/button&gt;
    &lt;/div&gt;
&lt;/div&gt;"</code></pre>
                            </td>
                        </tr>
                        <tr>
                            <td>onShow</td>
                            <td>Function</td>
                            <td>Function to execute right before the step is shown. It overrides the
                            global <code class="language-javascript">onShow</code> option.</td>
                            <td><code class="language-javascript">function(tour) { }</code></td>
                        </tr>
                        <tr>
                            <td>onShown</td>
                            <td>Function</td>
                            <td>Function to execute right after the step is shown. It overrides the
                            global <code class="language-javascript">onShown</code> option.</td>
                            <td><code class="language-javascript">function(tour) { }</code></td>
                        </tr>
                        <tr>
                            <td>onHide</td>
                            <td>Function</td>
                            <td>Function to execute right before the step is hidden. It overrides
                            the global <code class="language-javascript">onHide</code> option.</td>
                            <td><code class="language-javascript">function(tour) { }</code></td>
                        </tr>
                        <tr>
                            <td>onHidden</td>
                            <td>Function</td>
                            <td>Function to execute right after the step is hidden. It overrides the
                            global <code class="language-javascript">onHidden</code> option.</td>
                            <td><code class="language-javascript">function(tour) { }</code></td>
                        </tr>
                        <tr>
                            <td>onNext</td>
                            <td>Function</td>
                            <td>Function to execute when next step is called. It overrides the
                            global <code class="language-javascript">onNext</code> option.</td>
                            <td><code class="language-javascript">function(tour) { }</code></td>
                        </tr>
                        <tr>
                            <td>onPrev</td>
                            <td>Function</td>
                            <td>Function to execute when prev step is called. It overrides the
                            global <code class="language-javascript">onPrev</code> option.</td>
                            <td><code class="language-javascript">function(tour) { }</code></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </section>
        <section id="contribute">
            <div class="container">
                <div class="page-header">
                    <h2>Contributing <small>Do you think we need help? You are totally right</small></h2>
                </div>
                <p>Without your <a href="https://github.com/sorich87/bootstrap-tour/issues">bug
                reports</a> and <a href="https://github.com/sorich87/bootstrap-tour/pulls">pull
                requests</a>, we are nothing. Make this plugin better!</p>
                <h3>Grunt Usage</h3>
                <div id="grunt-usage" class="accordion">
                    <div class="accordion-group">
                        <div class="accordion-heading">
                            <a class="accordion-toggle" data-toggle="collapse" data-parent="#grunt-usage" href="#install-dependencies">Install Dependencies</a>
                        </div>
                        <div id="install-dependencies" class="accordion-body collapse">
                            <div class="accordion-inner">
                                <p>Files to be developed inside the project are located under
                                <code>/src/</code> and <code>/test/spec/</code>.</p>
                                <p>Compiled sources are then automatically put under
                                <code>/build/</code> and <code>/test/build/</code>.</p>
                            </div>
                        </div>
                    </div>
                    <div class="accordion-group">
                        <div class="accordion-heading">
                            <a class="accordion-toggle" data-toggle="collapse" data-parent="#grunt-usage" href="#run-tasks">Run predefined tasks by executing <code class="language-bash">grunt &lt;task&gt;:&lt;target&gt;</code></a>
                        </div>
                        <div id="run-tasks" class="accordion-body collapse">
                            <div class="accordion-inner">
                                <p><em>Check your coffeescripts style, or specify a single target</em></p>
<pre class="language-bash"><code>coffeelint
coffeelint:default
coffeelint:test
coffeelint:doc</code></pre>
                                <p><em>Clean all the 'build' directories, or specify a single target</em></p>
<pre class="language-bash"><code>clean
clean:default
clean:test</code></pre>
                                <p><em>Compile the coffeescripts into the 'build' directories, or specify a single target</em></p>
<pre class="language-bash"><code>coffee
coffee:default
coffee:test
coffee:doc</code></pre>
                                <p><em>Compile the less file into the 'build' directory with a minified version, or specify a single target</em></p>
<pre class="language-bash"><code>less
less:default
less:min</code></pre>
                                <p><em>Minify the javascripts in the 'build' directory</em></p>
<pre class="language-bash"><code>uglify</code></pre>
                                <p><em>Watch for changes of the coffeescripts (main and spec) and execute the assigned tasks, or specify a single target</em></p>
<pre class="language-bash"><code>watch
watch:default // tasks: clean:default, coffeelint:default, coffee:default, uglify
watch:test // tasks: clean:test, coffeelint:test, coffee:test, jasmine
watch:doc // tasks: coffeelint:doc, coffee:doc (with livereload)</code></pre>
                                <p><em>Run the jasmine specs headlessly through 'phantomjs'</em></p>
<pre class="language-bash"><code>jasmine</code></pre>
                                <p><em>Copy sources into doc assets</em></p>
<pre class="language-bash"><code>copy</code></pre>
                                <p><em>Small server to serve the static files</em></p>
<pre class="language-bash">con<code>nect</code></pre>
                                <p><em>Open automatically the browser to the port defined in connect options</em></p>
<pre class="language-bash"><code>open</code></pre>
                            </div>
                        </div>
                    </div>
                    <div class="accordion-group">
                        <div class="accordion-heading">
                            <a class="accordion-toggle" data-toggle="collapse" data-parent="#grunt-usage" href="#run-aliases">Run aliases for multiple tasks</a>
                        </div>
                        <div id="run-aliases" class="accordion-body collapse">
                            <div class="accordion-inner">
<pre class="language-javascript"><code>// watch : default
grunt
grunt default

// connect, open, watch:doc
grunt run

// clean:default, coffeelint, coffee:default, coffee:doc, less, uglify, copy
grunt build

// clean:test, coffeelint:test, coffee:test, jasmine
grunt test</code></pre>
                            </div>
                        </div>
                    </div>
                    <div class="accordion-group">
                        <div class="accordion-heading">
                            <a class="accordion-toggle" data-toggle="collapse" data-parent="#grunt-usage" href="#live-reload">Live reload</a>
                        </div>
                        <div id="live-reload" class="accordion-body collapse">
                            <div class="accordion-inner">
                                <p>Running <code class="language-bash">grunt run</code> will start a small server on port <code class="language-bash">3000</code> and opens the browser to the webpage. It will also start watching for changes in the <code class="language-bash">index.coffee</code> which will trigger then live reloading of the page in the browser.</p>
                            </div>
                        </div>
                    </div>
                    <div class="accordion-group">
                        <div class="accordion-heading">
                            <a class="accordion-toggle" data-toggle="collapse" data-parent="#grunt-usage" href="#test">Run the tests</a>
                        </div>
                        <div id="test" class="accordion-body collapse">
                            <div class="accordion-inner">
                                <p>Tests are written using <a href="http://pivotal.github.io/jasmine/" target="_blank">Jasmine framework</a> and they run headlessly through PhantomJS.<br>
                                Simply run <code class="language-bash">grunt test</code> or watch them with <code class="language-bash">grunt watch:test</code> (this will execute them automatically every time you change the specs).</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <section id="license">
            <div class="container">
                <div class="page-header">
                    <h2>License</h2>
                </div>
                <p>Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>.<br>
                Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.<br>
                Well, the same licenses as Bootstrap. We are lazy! ;)</p>
            </div>
        </section>
        <script src="assets/vendor/jquery.js"></script>
        <script src="assets/vendor/bootstrap-tooltip.js"></script>
        <script src="assets/vendor/bootstrap-popover.js"></script>
        <script src="assets/vendor/bootstrap-alert.js"></script>
        <script src="assets/vendor/bootstrap-collapse.js"></script>
        <script src="assets/vendor/jquery.cookie.js"></script>
        <script src="assets/vendor/prism.js"></script>
        <script src="assets/vendor/jquery.smoothscroll.js"></script>
        <script src="assets/js/bootstrap-tour.js"></script>
        <script src="assets/js/index.js"></script>
        <script src="http://localhost:35729/livereload.js"></script>
    </body>
</html>
